<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #xuanXiang{
            width: 300px;
            height: 300px;
            margin-top: 50px;
        }
        #xuanXiang .active{
            background-color: pink;
        }
        #xuanXiang_box p{
            width: 300px;
            height: 200px;
            border: solid 1px #ccc;
            position: absolute;
            display: none;
        }
    </style>
</head>

<body>
    <!-- 1.实现全选，不选，反选 --> 
    <button>全选</button>
    <button>不选</button>
    <button>反选</button>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">



    <div id="xuanXiang">
        <input type="button" value="按钮1" class="active anniu">
        <input type="button" value="按钮2" class="anniu">
        <input type="button" value="按钮3" class="anniu">
        <input type="button" value="按钮4" class="anniu">
        <div id="xuanXiang_box">
            <p style="display: block">按钮1111111111111111111111</p>
            <p>按钮2222222222222222222222222</p>
            <p>按钮33333333333333333333333</p>
            <p>按钮444444444444444444444</p>
        </div>
    </div>
</body>
<script>
    // 实现全选，不选，反选
    var btn = document.getElementsByTagName("button");
    var input = document.getElementsByTagName("input")
    for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
            if (this.innerHTML === "全选") {
                for (var j = 0; j < input.length; j++) {
                    input[j].checked = true;
                }
            }
            if (this.innerHTML === "不选") {
                for (var j = 0; j < input.length; j++) {
                    input[j].checked = false;
                }
            }
            if (this.innerHTML === "反选") {
                for (var j = 0; j < input.length; j++) {
                    if (input[j].checked === true) {
                        input[j].checked = false;
                    } else {
                        input[j].checked = true;
                    }
                }
            }
        }
    }
    

    // 实现选项卡
    var Btn = document.getElementsByClassName("anniu");
    var ap = document.getElementsByTagName("p");
    for(var i=0;i<Btn.length;i++){
        Btn[i].index = i;
        Btn[i].onclick = function(){
            for(var j=0;j<Btn.length;j++){
                Btn[j].className = "anniu";    
            }
            this.className = "anniu active";
            for(var j=0;j<ap.length;j++){
                ap[j].style.display = "none"
            }
            ap[this.index].style.display = "block";
            
        }
    }

</script>

</html>